<template>
    <card>
      <el-button type="primary" @click='showCouponForm(1)'>添加</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-table size="large" :row-style="iRowStyle" border ref="multipleTableRef" :data="couponInfoList" style="width: 100%; margin-top: 20px">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
        <el-table-column property="couponName" label="购物券名称" width="100" />
        <el-table-column property="couponTypeString" label="购物券类型" show-overflow-tooltip width="100" />
        <el-table-column property="benefitDiscount" label="规则" width="120" />
        <el-table-column property="rangeTypeString" label="范围类型" show-overflow-tooltip />
        <el-table-column property="limitNum" label="最多领用次数" width="110" />
        <el-table-column property="endTime" label="过期时间" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" width="100" />
        <el-table-column label="操作" show-overflow-tooltip align="center" width="170">
          <template #default="{ row, $index }">
            <el-button type="primary" :icon="Edit" size="small" style="margin: 0" title="修改" @click='showCouponForm(2,row)'/>
            <el-button type="" size="small" style="margin: 0" title="规则">规则</el-button>
            <el-button type="danger" :icon="Delete" size="small" style="margin: 0" title="删除" @click="deleteCoupon(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination style="margin: 30px 0 0 300px" v-model:currentPage="current" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper, ->, total, " :total="total"/>
    </card>
  </template>
  
  <script lang="ts">
  export default {
    name: "CouponList",
  };
  </script>
  
  <script lang="ts" setup>
  import { ref, onMounted, reactive } from "vue";
  import { ElTable } from "element-plus";
  import { Delete, Edit } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  //引入请求函数
  import { reqGetCouponList, reqDeleteCoupon } from "@/api/coupon";
  //引入类型
  import type { CouponInfoModel, CouponInfoListModel } from "@/api/model/couponModel";

  //接受父组件传过来的自定义事件
  const emits=defineEmits(['setShowStatus']);
  
  const current = ref<number>(1);
  const pageSize = ref<number>(10);
  const total = ref<number>(0);
  const small = ref(false);
  const background = ref(false);
  const disabled = ref(false);
  
  //定义每个用户信息
  const couponInfo = reactive<CouponInfoModel>({
    id: 0,
    couponName: "", //购物券名称
    couponTypeString: "", //购物券类型
    rangeTypeString: "", //范围类型
    limitNum: 0, //最多领用次数
    endTime: "", //过期时间
    createTime: "", //创建时间
    benefitDiscount: 0, //规则
    isChecked: 0, //是否选中
  });
  //定义存储用户信息的数组
  const couponInfoList = ref<CouponInfoListModel>([]);
  
  //设置表格行高
  const iRowStyle = () => {
    return "height:70px";
  };
  onMounted(() => {
    getCouponList();
  });
  //获取优惠券列表数据
  const getCouponList = async (page: number = current.value, limit: number = pageSize.value) => {
    let result = await reqGetCouponList(page, limit);
    current.value=page;
    pageSize.value=limit;
    couponInfoList.value = result.records;
    total.value = result.total;
  };
  //删除优惠券
  const deleteCoupon = async (id: number) => {
    //弹出遮罩层
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      let result = await reqDeleteCoupon(id);
      getCouponList();
      ElMessage({
        //点击确定的回调
        type: "success",
        message: "删除成功",
      });
    });
  };
  //点击修改按钮的回调
  const showCouponForm=(type:number,row:CouponInfoModel)=>{
     //跳到表单也页面
     emits('setShowStatus',2)
  
  }


  </script>
  
  <style scoped></style>
  